<template>
  <el-drawer v-model="drawerVisible" :direction="direction" :close-on-click-modal="false" :title="drawerTitle" size="500px" :before-close="handleClose">
    <template #default>
      <el-form ref="formRef" :model="dataForm" :rules="formRules" label-width="auto" style="max-width: 450px">
        <el-form-item label="项目名称" prop="project">
          <el-input v-model="dataForm.project" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="站点" prop="site">
          <el-input v-model="dataForm.site" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="计数" prop="count">
          <el-input v-model="dataForm.count" type="number" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="单价" prop="revenue_unit_price">
          <el-input v-model="dataForm.revenue_unit_price" type="number" />
        </el-form-item>
        <el-form-item label="预估收入" prop="estimated_revenue">
          <el-input v-model="dataForm.estimated_revenue" type="number" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="实际收入" prop="actual_revenue">
          <el-input v-model="dataForm.actual_revenue" type="number" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick(formRef)">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import type { DrawerProps } from 'element-plus'

const props = defineProps({
  
});
// 是否打开
const drawerVisible = ref(false)
// 标题
let drawerTitle = ref('')
// 表单
let dataForm = reactive({
  project: null,
  site: null,
  count: null,
  revenue_unit_price: null,
  estimated_revenue: null,
  actual_revenue: null
})
const formRules = reactive({
  project: [{ required: true, message: '必填', trigger: "blur" }],
  site: [{ required: true, message: '必填', trigger: "blur" }],
  count: [{ required: true, message: '必填', trigger: "blur" }],
  revenue_unit_price: [{ required: true, message: '必填', trigger: "blur" }],
  estimated_revenue: [{ required: true, message: '必填', trigger: "blur" }],
  actual_revenue: [{ required: true, message: '必填', trigger: "blur" }],
});
// 打开方向
const direction = ref<DrawerProps['direction']>('rtl')
const disabled = ref(false)
const open = (data) => {
  drawerVisible.value = true
  resetForm()
  drawerTitle.value = data.title
  disabled.value = data.disabled
}
const edit = (data) => {
  drawerVisible.value = true
  resetForm()
  drawerTitle.value = data.title
  dataForm = reactive({...data.form})
  disabled.value = data.disabled
}
const close = () => {
  formRef.value.resetFields()
  drawerVisible.value = false
}
const emit = defineEmits();
// 关闭前操作
const handleClose = (done: () => void) => {
  formRef.value.resetFields()
  done()
}
const formRef = ref()
const cancelClick = () => {
  formRef.value.resetFields()
  drawerVisible.value = false
}
const confirmClick = (formEl) => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (!valid) return;
    const form = JSON.parse(JSON.stringify(dataForm));
    if(disabled.value) {
      emit('editSave', form)
    } else {
      emit('addSave', form)
    }
  });
}
onMounted(() => {
});
const resetForm = () => {
  dataForm = reactive({
    project: null,
    site: null,
    count: null,
    revenue_unit_price: null,
    estimated_revenue: null,
    actual_revenue: null
  })
}
// 暴露给父组件方法
defineExpose({
  open,
  edit,
  close
});
</script>
